<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src = 'jquery-1.12.4.min.js'></script>
    <script>
        //用于拖动的功能
        var darg = function (opt) {
            var ad = opt.obj;
            var bar = opt.bar;

            $(document).data({num:1});

            bar.on({

            })
        }
    </script>
    <script>
        //if(booleean)
        //条件表达式 把条件表达式的结果 强制转换为boolean
        //只要条件表达式的内容不为0 就是true
        // 0 | null | 未定义


        //鼠标的坐标定义
        var mx , my;
        //定义div对象
        var ad,bar;
        //定义一个被拖动的对象
        var dray;
        //定义鼠标点到div左顶点的偏移量
        var px = 0,py = 0 ;


        window.onload = function () {
            ad = document.getElementById('ad');
            bar = document.getElementById('bar');


            $('#bar').on({

            } ,
                {

            })
            //div在鼠标按下去的时候
            bar.onmousedown = function (e) {

                //鼠标的坐标
                var cx = e.clientX ? e.clientX : e.layerX ;
                var cy = e.clientY ? e.clientY : e.layerY ;

                //div的坐标
                var dx = parseInt(ad.style.left);
                var dy = parseInt(ad.style.top);

                //偏移量
                px = cx - dx;
                py = cy - dy;

                dray = 1;
            };

            //div在鼠标按键松开的时候
            bar.onmouseup = function () {
                dray = 0;
            }
        };

        //onmouseover 鼠标悬停
        //onmousemove 鼠标移动
        document.onmousemove = function (e) {
            //控制台 输出鼠标的坐标 事件对象的属性 clientX[layerX] clientY[layerY]
            //三元运算符 boolean ? x : y;
            mx = e.clientX ? e.clientX : e.layerX ;
            my = e.clientY ? e.clientY : e.layerY ;

            //表明鼠标按下去的时候
            if (dray){
                ad.style.left = mx - px + 'px';
                ad.style.top = my - py + 'px';
            }
        }
    </script>
</head>
<body>
        <div id="ad" style="height: 200px;width: 200px;border: 1px solid red;margin: 100px 200px;position: relative;top: 0;left: 0;">
            <div id="bar" style="height: 30px;width: 200px;background-color: black;text-align: center">标题栏</div>
        </div>
</body>
</html>